<template>
	<view class="header">
		<!-- <up-search placeholder="请输入关键字搜索内容" v-model="keyword" shape="square"></up-search> -->
	</view>
	<view class="search">
		<view class="search-container">
			<up-search @custom="custom" placeholder="请输入关键字搜索内容" v-model="keyword" shape="square"></up-search>
		</view>
		<!-- 搜索列表 -->
		<view v-if="searchList.length != 0">
			<view class="searchResult">
				<up-subsection :list="list1" :current="0" @change="change"></up-subsection>
			</view>

			<view class="search-item">
				<waterfallVue :search="data.search" :changeType="data.changeType"></waterfallVue>
			</view>
		</view>
		<view v-else>
			<!-- 搜索历史 -->
			<view class="history" v-model="his">
				<view class="history-title">
					<text>历史搜索</text>
					<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
				</view>
				<view class="history-content" v-if="historyList.length != 0">
					<view class="history-item" v-for="(historyItem, historyIndex) in historyList" :key="historyIndex">
						{{ historyItem }}
					</view>
				</view>
				<view class="history-none" v-else>
					<text>无搜索历史</text>
				</view>
			</view>
			<!-- 搜索发现 -->
			<view class="found">
				<view class="found-title">
					<text>搜索发现</text>
					<uni-icons type="" size="20" color="#C0C0C0"></uni-icons>
				</view>
				<view class="found-content">
					<view class="found-item" v-for="(foundItem, foundIndex) in foundList" :key="foundIndex">
						{{ foundItem }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive, watch, watchEffect } from 'vue';
import waterfallVue from '../../components/waterfall/waterfall.vue';
import { SearchProduct } from '../../apis/api';

const keyword = ref('');
const searchList = ref([]);
const historyList = ref(JSON.parse(uni.getStorageSync('kw') || '[]'));
const foundList = ref(['零食', '平衡车', '行李箱', '小白鞋', '毛绒玩具', '连衣裙', '充电宝']);
let timer = null;
// 创建响应式数据
 // { name: '销量' },
const list1 = reactive([{ name: '综合' }, { name: '价格' }]);

const data = reactive({
	search: [],
	changeType:[]
});

const emits=defineEmits(['changeType'])

const custom = async (e) => {
	if (keyword.value.length === 0) {
		searchList.value = [];
		return;
	} else {
		await SearchProduct({
			product_name: e
		}).then((res) => {
			data.search=res.data
			console.log(res.data);
		});
	}
	searchList.value = e;
	saveHistory();
};

// 如果搜索关键词 keyword 不在历史记录中，则将其添加到历史记录的开头，并更新本地存储。
const saveHistory = () => {
	if (historyList.value.indexOf(keyword.value) === -1) {
		historyList.value.unshift(keyword.value);
		uni.setStorageSync('kw', JSON.stringify(historyList.value));
	}
};

const clearHistory = () => {
	historyList.value = [];
	uni.setStorageSync('kw', '[]');
};


const change=(e)=>{
	console.log(e);
	watchEffect(()=>{
		console.log(e);
		if(!e){
	data.changeType=0	
		}else{
			data.changeType=e
		}
	
	
	})
}

onMounted(() => {
	// Component is mounted, you can perform any setup here
});
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}

.header {
	padding: 10rpx;
}

.search {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	.search-container {
		width: 100%;
		padding: 10rpx;
	}
	.search-list {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		uni-icons {
			margin: 0 20rpx;
		}
	}
	.history {
		.history-title {
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text {
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.history-content {
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.history-item {
				height: 50rpx;
				line-height: 50rpx;
				background-color: #f8f8f8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding: 0 20rpx;
				border-radius: 20rpx;
			}
		}
		.history-none {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	.found {
		margin-top: 50rpx;
		.found-title {
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text {
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.found-content {
			width: 90%;
			margin: 10rpx auto;
			display: flex;
			flex-wrap: wrap;
			.found-item {
				height: 50rpx;
				line-height: 50rpx;
				background-color: #f8f8f8;
				margin-top: 10rpx;
				margin-right: 20rpx;
				padding: 0 20rpx;
				border-radius: 20rpx;
			}
		}
	}
	.searchResult {
		width: 100%;
	}
	.search-item{
		margin-top: 20rpx;
	}
}
</style>
